@import "../../styles/index.scss";

$tag-prefix-cls: "tag";

@mixin type($color) {
  color: $color;
  background-color: colorTransformPalette($color, 2);
  &.has-border {
    border: 1px solid colorTransformPalette($color, 3);
  }
  &:hover {
    color: darken($color: $color, $amount: 15%);
  }
}

.#{$tag-prefix-cls} {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 3px 5px;
  align-items: center;
  color: $black-65;
  transition: all 0.3s;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  &:hover {
    color: $blue;
  }
  &:not(:last-child) {
    margin-right: 5px;
  }
  &.has-border {
    border-color: $black-15;
  }
  &.#{$tag-prefix-cls}-has-color {
    color: #fff;
  }
}

.#{$tag-prefix-cls}-gray {
  @include type($black-65);
  background-color: $black-10;
  &.has-border {
    border-color: $black-15;
  }
}

.#{$tag-prefix-cls}-primary {
  @include type($blue);
}

.#{$tag-prefix-cls}-danger {
  @include type($red);
}

.#{$tag-prefix-cls}-warning {
  @include type($yellow);
}

.#{$tag-prefix-cls}-success {
  @include type($green);
}

.#{$tag-prefix-cls} {
  &.is-checked {
    color: #fff;
    background-color: $blue;
    border-color: $blue;
    &:hover {
      color: #fff;
      background-color: $blue-7;
    }
  }
}

.#{$tag-prefix-cls}-close-btn {
  display: inline-block;
  padding-left: 5px;
  cursor: pointer;
}
